<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓库失火自动报警灭火系统监控大屏</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
</head>
<body>
    <div class="dashboard">
        <!-- 顶部标题栏 -->
        <header class="header">
            <div class="header-left">
                <i class="fas fa-fire-extinguisher"></i>
                <h1>仓库失火自动报警灭火系统监控中心</h1>
            </div>
            <div class="header-right">
                <div class="datetime" id="datetime"></div>
                <div class="status-indicator">
                    <span class="status-dot online"></span>
                    <span>系统在线</span>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧区域 -->
            <section class="left-panel">
                <!-- 系统状态总览 -->
                <div class="card system-overview">
                    <h3><i class="fas fa-tachometer-alt"></i> 系统状态总览</h3>
                    <div class="overview-grid">
                        <div class="overview-item">
                            <div class="overview-icon normal">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <div class="overview-info">
                                <span class="overview-label">系统状态</span>
                                <span class="overview-value normal">正常</span>
                            </div>
                        </div>
                        <div class="overview-item">
                            <div class="overview-icon">
                                <i class="fas fa-thermometer-half"></i>
                            </div>
                            <div class="overview-info">
                                <span class="overview-label">平均温度</span>
                                <span class="overview-value">23.5°C</span>
                            </div>
                        </div>
                        <div class="overview-item">
                            <div class="overview-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="overview-info">
                                <span class="overview-label">烟雾浓度</span>
                                <span class="overview-value">0.02%</span>
                            </div>
                        </div>
                        <div class="overview-item">
                            <div class="overview-icon">
                                <i class="fas fa-water"></i>
                            </div>
                            <div class="overview-info">
                                <span class="overview-label">灭火剂压力</span>
                                <span class="overview-value">1.2MPa</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 报警记录 -->
                <div class="card alarm-log">
                    <h3><i class="fas fa-bell"></i> 报警记录</h3>
                    <div class="log-list">
                        <div class="log-item normal">
                            <div class="log-time">14:32:15</div>
                            <div class="log-content">
                                <i class="fas fa-check-circle"></i>
                                <span>A区域烟感器自检正常</span>
                            </div>
                        </div>
                        <div class="log-item normal">
                            <div class="log-time">14:15:08</div>
                            <div class="log-content">
                                <i class="fas fa-check-circle"></i>
                                <span>B区域温感器自检正常</span>
                            </div>
                        </div>
                        <div class="log-item normal">
                            <div class="log-time">13:45:22</div>
                            <div class="log-content">
                                <i class="fas fa-check-circle"></i>
                                <span>C区域喷淋系统自检正常</span>
                            </div>
                        </div>
                        <div class="log-item normal">
                            <div class="log-time">13:30:11</div>
                            <div class="log-content">
                                <i class="fas fa-check-circle"></i>
                                <span>D区域气体灭火系统自检正常</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 中央区域 -->
            <section class="center-panel">
                <!-- 仓库平面图 -->
                <div class="card warehouse-map">
                    <h3><i class="fas fa-map"></i> 仓库平面监控图</h3>
                    <div class="map-container">
                        <div class="warehouse-layout">
                            <!-- A区域 -->
                            <div class="zone zone-a" data-zone="A">
                                <div class="zone-label">A区域</div>
                                <div class="sensors">
                                    <div class="sensor smoke normal" title="烟感器">
                                        <i class="fas fa-eye"></i>
                                    </div>
                                    <div class="sensor temperature normal" title="温感器">
                                        <i class="fas fa-thermometer-half"></i>
                                    </div>
                                    <div class="sensor sprinkler normal" title="喷淋头">
                                        <i class="fas fa-shower"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- B区域 -->
                            <div class="zone zone-b" data-zone="B">
                                <div class="zone-label">B区域</div>
                                <div class="sensors">
                                    <div class="sensor smoke normal" title="烟感器">
                                        <i class="fas fa-eye"></i>
                                    </div>
                                    <div class="sensor temperature normal" title="温感器">
                                        <i class="fas fa-thermometer-half"></i>
                                    </div>
                                    <div class="sensor sprinkler normal" title="喷淋头">
                                        <i class="fas fa-shower"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- C区域 -->
                            <div class="zone zone-c" data-zone="C">
                                <div class="zone-label">C区域</div>
                                <div class="sensors">
                                    <div class="sensor smoke normal" title="烟感器">
                                        <i class="fas fa-eye"></i>
                                    </div>
                                    <div class="sensor temperature normal" title="温感器">
                                        <i class="fas fa-thermometer-half"></i>
                                    </div>
                                    <div class="sensor sprinkler normal" title="喷淋头">
                                        <i class="fas fa-shower"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- D区域 -->
                            <div class="zone zone-d" data-zone="D">
                                <div class="zone-label">D区域</div>
                                <div class="sensors">
                                    <div class="sensor smoke normal" title="烟感器">
                                        <i class="fas fa-eye"></i>
                                    </div>
                                    <div class="sensor temperature normal" title="温感器">
                                        <i class="fas fa-thermometer-half"></i>
                                    </div>
                                    <div class="sensor gas normal" title="气体灭火">
                                        <i class="fas fa-wind"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时数据图表 -->
                <div class="card charts-container">
                    <h3><i class="fas fa-chart-line"></i> 实时监控数据</h3>
                    <div class="charts-grid">
                        <div class="chart-item">
                            <h4>温度趋势</h4>
                            <canvas id="temperatureChart"></canvas>
                        </div>
                        <div class="chart-item">
                            <h4>烟雾浓度</h4>
                            <canvas id="smokeChart"></canvas>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 右侧区域 -->
            <section class="right-panel">
                <!-- 设备状态 -->
                <div class="card device-status">
                    <h3><i class="fas fa-cogs"></i> 设备状态</h3>
                    <div class="device-list">
                        <div class="device-item">
                            <div class="device-icon normal">
                                <i class="fas fa-fire-extinguisher"></i>
                            </div>
                            <div class="device-info">
                                <span class="device-name">主控制器</span>
                                <span class="device-status-text normal">正常运行</span>
                            </div>
                        </div>
                        <div class="device-item">
                            <div class="device-icon normal">
                                <i class="fas fa-broadcast-tower"></i>
                            </div>
                            <div class="device-info">
                                <span class="device-name">通信模块</span>
                                <span class="device-status-text normal">信号良好</span>
                            </div>
                        </div>
                        <div class="device-item">
                            <div class="device-icon normal">
                                <i class="fas fa-battery-full"></i>
                            </div>
                            <div class="device-info">
                                <span class="device-name">备用电源</span>
                                <span class="device-status-text normal">100%</span>
                            </div>
                        </div>
                        <div class="device-item">
                            <div class="device-icon normal">
                                <i class="fas fa-water"></i>
                            </div>
                            <div class="device-info">
                                <span class="device-name">水泵系统</span>
                                <span class="device-status-text normal">待机状态</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="card statistics">
                    <h3><i class="fas fa-chart-pie"></i> 统计信息</h3>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-number">156</div>
                            <div class="stat-label">传感器总数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">24</div>
                            <div class="stat-label">喷淋头数量</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">0</div>
                            <div class="stat-label">今日报警次数</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">99.8%</div>
                            <div class="stat-label">系统可用率</div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="card quick-actions">
                    <h3><i class="fas fa-bolt"></i> 快速操作</h3>
                    <div class="action-buttons">
                        <button class="action-btn test">
                            <i class="fas fa-play"></i>
                            <span>系统自检</span>
                        </button>
                        <button class="action-btn emergency">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span>紧急停止</span>
                        </button>
                        <button class="action-btn reset">
                            <i class="fas fa-redo"></i>
                            <span>复位系统</span>
                        </button>
                        <button class="action-btn report">
                            <i class="fas fa-file-alt"></i>
                            <span>生成报告</span>
                        </button>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

